<template>
  <div
    class="pictrue-box"
  >
    <el-row
      align="middle"
      justify="center"
    >
      <el-col
        class="upload"
        v-for="(item, index) in images"
        :key="item"
      >
        <el-image
          :src="item"
          fit="contain"
        >
          <template #error>
            <div class="image-slot">
              <i
                class="el-icon-picture"
                style="font-size: 60px; color: rgb(219, 219, 219);"
              />
            </div>
          </template>
        </el-image>
        <div
          class="image-ctrl"
        >
          <div
            @click.prevent="viverShow(item, index)"
          >
            <el-icon
              class="el-icon-view"
            />
          </div>
          <div
            @click.prevent="removeSelected(index)"
          >
            <el-icon
              class="el-icon-delete"
            />
          </div>
        </div>
      </el-col>
      <el-col
        v-if="showImageUploadIcon"
        class="upload"
        align="middle"
        justify="center"
        @click="imageUploadVisable = true"
      >
        <i
          class="el-icon-picture"
          style="font-size: 26px;"
        />
        <el-icon class="el-icon-plus" />
      </el-col>
    </el-row>

    <app-image-uploader
      v-model="imageUploadVisable"
      @confirm="onMultipleSelectionConfirm"
      :max-select="props.options.maxSelect"
      :default-selected="images"
      :title="props.title"
    />
    <el-dialog
      v-model="previewShow"
      width="580px"
      title=""
      append-to-body
      center
      @close="previewImageSrc = ''"
    >
      <div
        class="image-preview"
        :style="{backgroundImage:`url(${previewImageSrc})`}"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'

interface IProps {
    modelValue: string[] | string | null,
    options?: {
      size?: string,
      maxSelect: number,
      icon?: string,
    }
    title?: string
}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: () => null,
  options: () => ({
    maxSelect: 1
  }),
  title: '上传图片'
})

const showImageUploadIcon = computed(() => {
  return !props.modelValue || props.modelValue === '' || (props.options.maxSelect > 1 && props.modelValue.length < props.options.maxSelect)
})

const images = computed(() => {
  let imgs: string[] = []
  if (!props.modelValue) return imgs

  if (typeof props.modelValue === 'string') {
    imgs.push(props.modelValue)
  } else {
    imgs = imgs.concat(props.modelValue)
  }
  return imgs
})

const previewImageSrc = ref('')
const previewShow = ref(false)

const viverShow = (src: string, initialViewIndex?: number) => {
  previewShow.value = true
  previewImageSrc.value = src
}
const removeSelected = (index: number = 0) => {
  if (props.options.maxSelect === 1) {
    emit('update:model-value', '')
  } else {
    const tmpValue: string[] = JSON.parse(JSON.stringify(props.modelValue))
    tmpValue.splice(index, 1)
    emit('update:model-value', tmpValue)
  }
}

interface EmitsType {
  (e: 'update:model-value', value: string[] | string): void
}

onMounted(() => {
})

const emit = defineEmits<EmitsType>()

const imageUploadVisable = ref(false)

const onMultipleSelectionConfirm = (selection: string[]) => {
  if (props.options.maxSelect === 1) {
    emit('update:model-value', selection[0])
  } else {
    emit('update:model-value', selection)
  }
  // 关闭选择弹窗
  imageUploadVisable.value = false
}
</script>
<style lang="scss" scoped>
.pictrue-box {
  display: inline-block;
  .upload {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0,0,0,.1);
    border-radius: 4px;
    background: rgba(0,0,0,.02);
    cursor: pointer;
    flex: 1;
    margin-right: 8px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .image-ctrl {
      position: absolute;
      top: 0;
      left: 0;
      width: 58px;
      height: 58px;
      display: inline-flex;
      text-align: center;
      align-items: stretch;
      & div {
        display: none;
      }
      &:hover div{
        display: block;
        flex: 1;
        justify-content: center;
        background: rgba(22, 22, 22, 0.4);
        &:hover {
          background: rgba(22, 22, 22, 0.6);
          .el-icon {
            color: #e8eaec;
            font-weight: bolder;
            &-view {
              color: #40ff50;
            }
            &-delete {
              color: #ff4040;
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog) {
    & .el-dialog__header {
      border-bottom: 1px solid #e8eaec;
      padding: 14px 16px;
      line-height: 1;
    }
    & .el-dialog__body {
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;
    }

    & .el-input.search-input {
      width: 90%;
    }
    & .search-btn {
      background-color: #409eff;
      color: white;
      padding-right: 10px;
    }
  }
}

.image-preview{
  width: 100%;
  min-height: 520px;
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: -30px;
}
</style>
